<template>
  <div class="dingtalkWall">

    <div class="content">
      <div class="header">
        <!-- 全屏 -->
        <div class="fullScreen" @click="fullScreen"><span v-if="!isFullScreen">全屏</span> <span v-else>退出全屏</span></div>
        <div class="number">
          <p class="txt">集训已签到<span class="boldFont">{{totalData.checkInNum}}</span>人</p>
          <div class="detail">
            <!-- 应到 -->
            <div class="beShould">
              <i class="icon"></i>
              <p class="txt">
                <span>应到</span>
                <span class="boldFont">{{totalData.shouldBeNum}}</span>
                <span>人</span>
              </p>
            </div>
            <!-- 迟到 -->
            <div class="beLate">
              <i class="icon"></i>
              <p class="txt">
                <span>迟到</span>
                <span class="boldFont">{{totalData.lateNum}}</span>
                <span>人</span>
              </p>
            </div>
            <!-- 缺席 -->
            <div class="absence">
              <i class="icon"></i>
              <p class="txt">
                <span>缺席</span>
                <span class="boldFont">{{totalData.absenceNum}}</span>
                <span>人</span>
              </p>
            </div>
          </div>
        </div>
        <!-- Tips / 时间 -->
        <div class="server">
          <!-- Tips -->
          <div class="tips">请到签到处人脸识别签到</div>
          <!-- 时间 -->
          <dir v-if="isBegin" class="time">
            <p class="txt">会议进行中</p>
          </dir>
          <div class="time" v-else>
            <p class="txt">距离会议开始</p>
            <p class="scale">
              <span v-for="(item, index) in countDown.hour" :key="index" class="boldFont">{{item}}</span>
            </p>
            <p class="txt">时</p>
            <p class="scale">
              <span v-for="(item, index) in countDown.minute" :key="index" class="boldFont">{{item}}</span>
            </p>
            <p class="txt">分</p>
            <p class="scale">
              <span v-for="(item, index) in countDown.second" :key="index" class="boldFont">{{item}}</span>
            </p>
            <p class="txt">秒</p>
          </div>
        </div>
      </div>
      <!-- cen -->
      <div class="cen">
        <div v-for="(item, index) in userList" :key="index" class="seat">
          <div v-if="item.imgUrl === '' || item.checkInStateCode !== 51001" class="portrait" :style="{background: item.backgroundColor}">{{item.name.substring(0)}}</div>
          <img v-else :src="item.imgUrl" class="portrait" />
          <i class="state" :class="{'beLate': item.checkInStateCode === 51002,'absence': item.checkInStateCode === 51003}"></i>
        </div>
        <!-- <div class="seat">
          <img src="../../static/img/photo.png" class="portrait" />
          <i class="state beLate"></i>
        </div>
        <div class="seat">
          <img src="../../static/img/photo.png" class="portrait" />
          <i class="state absence"></i>
        </div>
        <div class="seat">
          <div class="portrait">张淼</div>
          <i class="state absence"></i>
        </div> -->
        <div v-for="item in newArr" :key="item" class="seat empty"></div>
      </div>
      <!-- footer -->
      <div class="footer">
        <div v-for="(item, index) in tabList" :key="index" @click="tabClickFun(index)" class="tab" :class="{'active': index === activeNum}">
          <p class="title">{{item.plateName}}</p>
          <p class="totalNum boldFont">{{item.checkInNum}}</p>
          <div class="details">
            <!-- 应到 -->
            <div class="item">
              <img src="../../static/img/ico1.png">
              <p class="num boldFont">{{item.shouldBeNum}}</p>
            </div>
            <!-- 迟到 -->
            <div class="item">
              <img src="../../static/img/ico2.png">
              <p class="num boldFont">{{item.lateNum}}</p>
            </div>
            <!-- 缺席 -->
            <div class="item">
              <img src="../../static/img/ico3.png">
              <p class="num boldFont">{{item.absenceNum}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
import {
  GetPlateSummaryDataApi,
  GetCheckInInfoForPlateListApi
} from "@/api/index";
export default {
  data() {
    return {
      isFullScreen: false, // 是否全屏
      newArr: new Array(36),
      activeNum: 0, // 当前触发页面
      colorList: [
        "#e6aae8",
        "#efe6a0",
        "#6bce9f",
        "#d8795b",
        "#ff7882",
        "#48bde5",
        "#c69c6d"
      ],
      userList: [], // 人员列表
      tabList: [], // tab列表
      totalData: {
        shouldBeNum: 0,
        checkInNum: 0,
        lateNum: 0,
        absenceNum: 0,
        plateDataList: []
      }, // 总数据
      isBegin: false, // 是否开始
      countDown: {
        hour: "00",
        minute: "00",
        second: "00"
      },

      myPageGlobal: {
        time1: 0,
        time2: 0,
        totalDataLock: false,
        userDataLock: false
      }
    };
  },
  mounted() {
    this.setData();
    this.changeTab();
    // this.fetchData();
    this.fetchTabData();
    // this.fetchTotalData();
  },
  methods: {
    activeColorFun() {
      return "red";
    },
    setData() {
      var self = this;
      clearTimeout(this.myPageGlobal.time1);
      this.myPageGlobal.time1 = setTimeout(function() {
        self.setData();
        if (self.myPageGlobal.totalDataLock) {
          return;
        }
        self.fetchTotalData();
        // 倒计时
        if (!self.isBegin) {
          self.daojishi();
        }
      }, 1000);
    },
    daojishi() {
      var date = new Date();
      var now = date.getTime();
      var endDateYear = date.getFullYear();
      var endDateMonth = date.getMonth() + 1;
      var endDateDay = date.getDate();
      var endDateStr =
        endDateYear + "-" + endDateMonth + "-" + endDateDay + " 19:00:00";
      // 设置截止时间
      var endDate = new Date(endDateStr);
      var end = endDate.getTime();
      // 时间差
      var leftTime = end - now;
      // 定义变量 d,h,m,s保存倒计时的时间
      var h, m, s;
      if (leftTime >= 0) {
        // d = Math.floor(leftTime/1000/60/60/24);
        h = Math.floor((leftTime / 1000 / 60 / 60) % 24);
        m = Math.floor((leftTime / 1000 / 60) % 60);
        s = Math.floor((leftTime / 1000) % 60);
      }
      if (
        h + m + s === 0 ||
        (typeof h === "undefined" &&
          typeof m === "undefined" &&
          typeof s === "undefined")
      ) {
        this.$set(this, "isBegin", true);
      } else {
        var newDate = {
          hour: String(h),
          minute: String(m),
          second: String(s)
        };
        this.$set(this, "countDown", newDate);
      }
    },
    changeTab() {
      var self = this;
      clearTimeout(this.myPageGlobal.time2);
      this.myPageGlobal.time2 = setTimeout(function() {
        self.$set(self, "activeNum", (self.activeNum + 1) % 7);
        self.fetchUserData();
        self.changeTab();
      }, 7000);
    },
    // 获取tab数据
    async fetchTabData() {
      try {
        const res = await GetPlateSummaryDataApi();
        if (res.data.code === "0") {
          var result = res.data.result;
          this.$set(this, "totalData", result);
          this.$set(this, "tabList", result.plateDataList);
          this.fetchUserData();
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 获取总数据
    async fetchTotalData() {
      this.$set(this.myPageGlobal, "totalDataLock", true);
      try {
        const res = await GetPlateSummaryDataApi();
        if (res.data.code === "0") {
          var result = res.data.result;
          this.$set(this, "totalData", result);
          this.$set(this, "tabList", result.plateDataList);
        }
      } catch (error) {
        console.log(error);
      }
      this.$set(this.myPageGlobal, "totalDataLock", false);
    },
    // 获取各版块签到信息
    async fetchUserData() {
      this.$set(this.myPageGlobal, "userDataLock", true);
      var num = this.activeNum;
      const param = {
        deptId: String(this.tabList[num].plateId)
      };
      try {
        this.$set(this, "userList", []);
        this.$set(this, "newArr", new Array(36));
        const res = await GetCheckInInfoForPlateListApi(param);
        if (res.data.code !== "0") return;
        if (!res.data.result || res.data.result.length < 1) return;
        var result = res.data.result;
        // result.forEach(element => {
        //   var a = Math.floor(Math.random() * 7);
        //   element.backgroundColor = this.colorList[a];
        // });
        result.forEach(element => {
          switch (element.checkInStateCode) {
            case 51003:
              element.backgroundColor = "#999";
              break;
            case 51002:
              element.backgroundColor = "#efe6a0";
              break;
            default:
              element.backgroundColor = "#6bce9f";
              break;
          }
        });
        this.$set(this, "userList", result);
        this.$set(this, "newArr", new Array(36 - result.length));
      } catch (error) {
        console.log(error);
      }
      this.$set(this.myPageGlobal, "userDataLock", false);
    },
    tabClickFun(index) {
      this.$set(this, "activeNum", index);
      this.fetchUserData();
      this.changeTab();
    },
    // 全屏方法
    fullScreen() {
      if (this.isFullScreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        var docElm = document.documentElement;
        // W3C
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen();
        }
        // FireFox
        else if (docElm.mozRequestFullScreen) {
          docElm.mozRequestFullScreen();
        }
        // Chrome等
        else if (docElm.webkitRequestFullScreen) {
          docElm.webkitRequestFullScreen();
        }
        // IE11
        else if (docElm.msRequestFullscreen) {
          docElm.msRequestFullscreen();
        }
      }
      this.$set(this, "isFullScreen", !this.isFullScreen);
    }
  }
};
</script>

<style scoped>
.dingtalkWall {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background-color: #1b1464;
}
.content {
  position: absolute;
  top: 20px;
  right: 20px;
  bottom: 20px;
  left: 20px;
  z-index: 1;
  line-height: 1;
}
.header {
  position: relative;
  width: 100%;
  /* height: 2.22rem; */
  padding: 76px 20px 70px 160px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}
.header > .fullScreen {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  padding: 10px 20px;
  line-height: 1;
  color: #52d2ff;
  font-size: 22px;
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 4px;
}
.number {
  display: flex;
  align-items: flex-end;
}
.number > .txt {
  display: flex;
  align-items: flex-end;
  margin-right: 52px;
  color: #52d2ff;
  font-size: 50px;
  font-weight: bold;
}
.number > .txt > .boldFont {
  display: inline-block;
  height: 82px;
  line-height: 1;
  margin-left: 20px;
  margin-right: 20px;
  color: #ed1c24;
  font-size: 110px;
}
.number > .detail {
  display: flex;
  align-items: flex-end;
}
.number > .detail .icon {
  width: 30px;
  height: 30px;
  margin-right: 5px;
}
/* 应到 */
.number > .detail > .beShould {
  display: flex;
  align-items: flex-end;
  margin-right: 20px;
}
.number > .detail > .beShould > .icon {
  background: url("../../static/img/ico1.png") left top no-repeat;
  background-size: 100% 100%;
}
.number > .detail > .beShould > .txt {
  display: flex;
  align-items: flex-end;
  color: #52d2ff;
  font-size: 36px;
}
.number > .detail > .beShould > .txt > .boldFont {
  display: inline-block;
  height: 30px;
  line-height: 0.6;
  margin-left: 8px;
  margin-right: 8px;
  color: #43dd93;
  font-size: 50px;
}
/* 迟到 */
.number > .detail > .beLate {
  display: flex;
  align-items: flex-end;
  margin-right: 20px;
}
.number > .detail > .beLate > .icon {
  background: url("../../static/img/ico2.png") left top no-repeat;
  background-size: 100% 100%;
}
.number > .detail > .beLate > .txt {
  display: flex;
  align-items: flex-end;
  color: #52d2ff;
  font-size: 36px;
}
.number > .detail > .beLate > .txt > .boldFont {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  margin-left: 8px;
  margin-right: 8px;
  color: #fbb03b;
  font-size: 50px;
}
/* 缺席 */
.number > .detail > .absence {
  display: flex;
  align-items: flex-end;
}
.number > .detail > .absence > .icon {
  background: url("../../static/img/ico3.png") left top no-repeat;
  background-size: 100% 100%;
}
.number > .detail > .absence > .txt {
  display: flex;
  align-items: flex-end;
  color: #52d2ff;
  font-size: 36px;
}
.number > .detail > .absence > .txt > .boldFont {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  margin-left: 8px;
  margin-right: 8px;
  color: #f15a24;
  font-size: 50px;
}

/* Tips */
.server {
  display: flex;
  justify-content: space-between;
}
.server > .tips {
  margin-top: 30px;
  color: #52d2ff;
  font-size: 22px;
  line-height: 1;
}
.server > .time {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.server > .time > .txt {
  color: #52d2ff;
  font-size: 22px;
}
.server > .time > .scale {
  display: flex;
  margin-left: 10px;
  margin-right: 10px;
  color: #52d2ff;
}
.server > .time > .scale:nth-of-type(1) {
  margin-left: 0;
  margin-right: 0;
}
.server > .time > .scale > span {
  display: inline-block;
  width: 30px;
  height: 40px;
  line-height: 1.5;
  color: #fbb03b;
  font-size: 30px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 2px;
}
.server > .time > .scale > span:nth-of-type(1) {
  margin-right: 5px;
}

/* cen */
.cen {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  padding-top: 24px;
}
.cen > .seat {
  position: relative;
  width: 134px;
  height: 134px;
  margin-right: 24px;
  margin-bottom: 24px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  overflow: hidden;
}
.cen > .seat:nth-child(12n) {
  margin-right: 0;
}
.cen > .seat.empty {
  border: 1px solid rgba(0, 255, 255, 0.3);
}
.cen > .seat:nth-last-of-type(1) {
  margin-right: 0;
}
/* .cen > .seat:nth-child(13n) {
  margin-right: 0;
} */
.cen > .seat > .portrait {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  /* line-height: 1.22rem; */
  color: #000;
  font-size: 30px;
  /* background-color: #d8795b; */
  border: none;
  border-radius: 4px;
  object-fit: cover;
}
.cen > .seat > .state {
  position: absolute;
  top: -1px;
  right: -1px;
  z-index: 1;
  width: 32px;
  height: 32px;
}
.cen > .seat > .state.beLate {
  background: url("../../static/img/ico4.png") left top no-repeat;
  background-size: 100% 100%;
}
.cen > .seat > .state.absence {
  background: url("../../static/img/ico5.png") left top no-repeat;
  background-size: 100% 100%;
}

/* footer */
.footer {
  display: flex;
  position: absolute;
  bottom: 0;
  z-index: 1;
}
.footer > .tab {
  width: 251px;
  height: 251px;
  margin-right: 20px;
  padding: 36px 20px 28px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}
.footer > .tab:nth-last-of-type(1) {
  margin-right: 0;
}
.footer > .tab > .title {
  color: #52d2ff;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
}
.footer > .tab > .totalNum {
  margin-top: 20px;
  color: #ed1c24;
  font-size: 44px;
  text-align: center;
}
.footer > .tab > .details {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
.footer > .tab > .details > .item:nth-of-type(1) {
  color: #43dd93;
}
.footer > .tab > .details > .item:nth-of-type(2) {
  color: #fbb03b;
}
.footer > .tab > .details > .item:nth-of-type(3) {
  color: #f15a24;
}
.footer > .tab > .details > .item > img {
  width: 24px;
  height: 24px;
}
.footer > .tab > .details > .item > .num {
  margin-top: 5px;
  font-size: 28px;
  text-align: center;
  line-height: 1;
}
.footer > .active {
  position: relative;
  z-index: 1;
  animation: tabActive 3s linear infinite alternate;
}
.footer > .active:before,
.footer > .active:after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: "";
  z-index: -1;
  transform: scale(1.03);
  animation: surround linear infinite 8s;
  box-shadow: inset 0 0 0 4px #fbb03b;
  /* background: linear-gradient(to right, #52D2FF, rgba(82, 210, 255,0)); */
}

.footer > .active:before {
  animation-delay: -4s;
}

@keyframes surround {
  0%,
  100% {
    clip: rect(0px, 251px, 2px, 0px);
  }
  25% {
    clip: rect(0px, 2px, 251px, 0px);
  }
  50% {
    clip: rect(251px, 251px, 251px, 0px);
  }
  75% {
    clip: rect(0px, 251px, 251px, 251px);
  }
}

/* @media screen and (max-height: 969px) {
  .header {
    padding: 0.12rem 0.2rem 0.16rem 1.6rem;
  }
  .number > .txt {
    font-size: 0.3rem;
  }
  .number > .txt > .boldFont {
    height: 0.5rem;
    line-height: 0.64rem;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    font-size: 0.5rem;
  }
  .server > .tips {
    margin-top: 0.2rem;
    font-size: 0.18rem;
  }
  .server > .time {
    margin-top: 0.1rem;
  }
  .server > .time > .txt {
    font-size: 0.18rem;
  }
  .server > .time > .scale > span {
    font-size: 0.28rem;
  }
}

@media screen and (max-height: 768px) {
  .header {
    padding: 0.32rem 0.2rem 0.56rem 1.6rem;
  }
  .number > .txt {
    font-size: 0.4rem;
  }
  .number > .txt > .boldFont {
    height: 0.8rem;
    line-height: 0.9rem;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    font-size: 1.1rem;
  }
  .server > .tips {
    margin-top: 0.3rem;
    font-size: 0.28rem;
  }
  .server > .time {
    margin-top: 0.2rem;
  }
  .server > .time > .txt {
    font-size: 0.28rem;
  }
  .server > .time > .scale > span {
    font-size: 0.28rem;
  }
} */
</style>

